<template>
	<view class="container">
		<view className="article_content" v-html="article"></view>
		<view class="footer">
			<button @click="gotoIndex()">目录</button>
			<button @click="addCollection()">加入收藏</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				article: '',
				bookId: '',
				indexNum: '',
				bookName : '',
				contentId : ''
			}
		},
		methods: {
			getContent(bookId, indexNum) {
				this.$myRequist({
					url: '/book/queryContent/' + bookId + '/' + indexNum
				}).then(res => {
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();
					if (null != res.data.data) {
						this.article = res.data.data.content;
						this.indexNum = indexNum;
						this.contentId =res.data.data.id;
					} else {
						uni.showToast({
							title: "没有更多",
							icon: "none"
						})
					}
				})
			},
			gotoIndex() {
				uni.navigateTo({
					url: '/pages/book/bookIndex/bookIndex?bookid=' + this.bookId+'&bookname='+this.bookName
				});
			},
			addCollection(){
				if(!this.$store.state.hasLogin){
					uni.showToast({
						title: "未登录",
						icon: "none"
					})
					return;
				}
				this.$myRequist({
					url: "/user/addToBookShelf",
					method:"post",
					header: {
						Authorization: uni.getStorageSync('token')
					},
					data:{"bookId":this.bookId,"preContentId":this.contentId}
				}).then(res => {
					this.listData = res.data.rows;
				})
			}
			
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.bookId = option.bookId;
			this.bookName=option.bookName;
			this.indexNum = option.indexNum;
			uni.setNavigationBarTitle({
				title: option.bookName
			});
			this.$myRequist({
				url: '/book/queryContent/' + option.bookId + '/' + option.indexNum
			}).then(res => {
				if (null != res.data.data) {
					this.article = res.data.data.content;
					this.contentId =res.data.data.id;
				} else {
					uni.showToast({
						title: "没有更多",
						icon: "none"
					})
				}
			})
		},

		/*下拉刷新*/
		onPullDownRefresh() {
			this.getContent(this.bookId, this.indexNum - 1);
		},
		/*上拉刷新*/
		onReachBottom() {
			this.getContent(this.bookId, this.indexNum + 1);
		}
	}
</script>

<style>
	.container {
		padding: 15px;
	}

	.article_content {
		color: white;
		WORD-WRAP: break-word;
		TABLE-LAYOUT: fixed;
		word-break: break-all;

	}

	.footer {
		position: fixed;
		bottom: 30px;
		right: 30px;
	}
</style>
